(function($) {
    var quoueText = function(_text) {
        return _text.replace(/({|}|<\?|\?>)/g, "");
    };
    var getColor = function(mainID, id) {
        var ElemClass = "#" + $("#" + id + "_" + mainID).children(".colpick_hex_field").children("input").val();
        return ElemClass;
    };
    var changeFont = function(id) {
        return function() {
            var tekst = $("#textarea_" + id).selection();
            var ElemClass = $(this).attr("class");
            $("#textarea_" + id).selection("replace", {text: "<span class=\"" + ElemClass + "\">" + quoueText(tekst) + "</span>"});
            $("#result_" + id).html($("#textarea_" + id).val());
        };
    };
    var newline = function(id) {
        return function(event) {
            if (event.which === 13) {
                if (event.shiftKey) {
                    $("#textarea_" + id).selection('insert', {text: '<br/>', mode: 'before'});
                }
                else {
                    $("#textarea_" + id).selection('insert', {text: '<p>', mode: 'before'});
                    $("#textarea_" + id).selection('insert', {text: '</p>', mode: 'after'});
                }

                $("#result_" + id).html(quoueText($("#textarea_" + id).val()));
            }
            ;
        };
    };
    var changeText = function(id) {
        return function() {
            var tekst = $("#textarea_" + id).selection();
            var ElemClass = $(this).children("span").attr("class");
            console.log(ElemClass);
            $("#textarea_" + id).selection("replace", {text: "<span class=\"" + ElemClass + "\">" + quoueText(tekst) + "</span>"});
            $("#result_" + id).html($("#textarea_" + id).val());
        };
    };
    var changeColor = function(mainID, id) {
        $("#" + id + "_" + mainID).children(".colpick_submit").click(function() {
            var tekst = $("#textarea_" + mainID).selection();
            var color = getColor(mainID, id);
            $("#textarea_" + mainID).selection("replace", {text: "<span style=\"color:" + color + "\">" + quoueText(tekst) + "</span>"});
            $("#result_" + mainID).html($("#textarea_" + mainID).val());
        });
    };
    var HighlightText = function(mainID, id) {
        $("#" + id + "_" + mainID).children(".colpick_submit").click(function() {
            var tekst = $("#textarea_" + mainID).selection();
            var color = getColor(mainID, id);
            $("#textarea_" + mainID).selection("replace", {text: "<span style=\"background-color: " + color + "\">" + quoueText(tekst) + "</span>"});
            $("#result_" + mainID).html($("#textarea_" + mainID).val());
        });
    };
    var initColpick = function(mainID, classElem, id) {
       // console.log(id)
        $("#" + mainID).find("button." + classElem).colpick({
            colorScheme: 'dark',
            layout: 'rgbhex',
            color: 'ff8800',
            elemID: id + "_" + mainID,
            onSubmit: function(hsb, hex, rgb, el) {
                $(el).css('background-color', '#' + hex);
                $(el).colpickHide();
            }
        });
    };
    var EditorInit = function(id) {
        $("#" + id).find("ul.changeFont").children("li").click(changeFont(id));
        $("#" + id).find("button.changeText").click(changeText(id));
        $("#textarea_" + id).keydown(newline(id));
        $("#textarea_" + id).on('change paste keyup', function(event) {
            $("#result_" + id).html(quoueText($("#textarea_" + id).val()));
        });
        initColpick(id, "changeColor", "fontChangeColor");
        initColpick(id, "highlightColor", "fontHighlightColor");
        changeColor(id, "fontChangeColor");
        HighlightText(id, "fontHighlightColor");
    };
    $.fn.Editor = function(id,tekst) {
        var content = '<div class="Editor" id="'+id+'">';
        content += '<div class="btn-group" role="group"><button type="button" class="btn btn-default changeText height50px"><span class="bold">B</span></button><button type="button" class="btn btn-default changeText height50px"><span class="italic">I</span></button><button type="button" class="btn btn-default changeText height50px"><span class="underline">U</span></button><button type="button" class="btn btn-default changeText height50px"><span class="strike">abc</span></button><button type="button" class="btn btn-default changeText height50px">x<span class="sub">2</span></button><button type="button" class="btn btn-default changeText height50px">x<span class="sup">2</span></button><button type="button" class="btn font-color btn-default changeColor height50px"><img src="/editor/font-color-icon.png"></button><button type="button" class="btn font-color btn-default highlightColor height50px"><img src="/editor/highlighter.png"></button><div class="btn-group" role="group"><button type="button" class="btn btn-default dropdown-toggle height50px" data-toggle="dropdown" aria-expanded="false">czcionki<span class="caret"></span></button><ul class="dropdown-menu changeFont" role="menu"><li class="arial"><a href="#">Arial</a></li><li class="verdana"><a href="#">Verdana</a></li><li class="tahoma"><a href="#">Tahoma</a></li><li class="Trebuchet"><a href="#">Trebuchet</a></li><li class="times"><a href="#">Times New Roman</a></li><li class="georgia"><a href="#">Georgia</a></li><li class="garamond"><a href="#">Garamond</a></li><li class="palatino"><a href="#">Palatino Linotype</a></li><li class="comic"><a href="#">Comic Sans MS</a></li><li class="courier"><a href="#">Courier New</a></li></ul></div><div class="btn-group" role="group"><button type="button" class="btn btn-default dropdown-toggle height50px" data-toggle="dropdown" aria-expanded="false">rozmiar<span class="caret"></span></button><ul class="dropdown-menu changeFont" role="menu"><li class="font10px"><a href="#">10px</a></li><li class="font11px"><a href="#">11px</a></li><li class="font12px"><a href="#">12px</a></li><li class="font14px"><a href="#">14px</a></li><li class="font16px"><a href="#">16px</a></li><li class="font16px"><a href="#">18px</a></li><li class="font20px"><a href="#">20px</a></li><li class="font24px"><a href="#">24px</a></li><li class="font28px"><a href="#">28px</a></li><li class="font30px"><a href="#">30px</a></li></ul></div></div><br/>';
        content += '<textarea id="textarea_' + id + '" name="' + id + '" rows="10" cols="71">' + tekst + '</textarea><div id="result_' + id + '">' + tekst + '</div></div>';
        $(this).html(content);
        EditorInit(id);
    };
})(jQuery);


